/* 
 *  Corgi Coding 
 *  ------------
 *  组件：顶部导航栏
 *  
 *  Author：Charles Chan
 *  Date： 2021/01/04
 *  FinalDate: 2021/01/10
 */

var ccNavigator = function (setting) {
    "use strict";

    let st = setting;

    /* logo 改变请修改此字段 */
    let svgIcon0 = `<svg t="1610284372746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6674" width="32" height="32"><path d="M853.333333 725.034667v64H170.666667v-64h682.666666z m-149.333333-309.333334l149.333333 106.666667-149.333333 106.666667v-213.333334z m-85.333333 74.666667v64H170.666667v-64h448zM853.333333 256v64H170.666667v-64h682.666666z" p-id="6675" fill="#ffffff"></path></svg>`;
    let svgIcon00 = `<svg t="1610284665751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6927" width="32" height="32"><path d="M853.333333 714.666667v64H170.666667v-64h682.666666zM320 405.333333v213.333334l-149.333333-106.666667 149.333333-106.666667z m533.333333 85.333334v64H405.333333v-64h448z m0-234.666667v64H170.666667v-64h682.666666z" p-id="6928" fill="#ffffff"></path></svg>`;
    /*
     *   --------启动区--------- 
     */
    
    let elementId = fnId(st.id);
    let ulElement = document.createElement('ul');
    let parentElement = document.getElementById(elementId);

    let svgDiv = document.createElement('div');
    svgDiv.id = '__svgDiv';
    svgDiv.innerHTML = svgIcon0;

    let logoDiv = fnLogo(st.logo);

    parentElement.appendChild(logoDiv);
    parentElement.appendChild(svgDiv);
    parentElement.appendChild(ulElement);
    fnData();
    parentElement.className = 'navigator-box';

    /*
     *   --------函数区--------- 
     */

    /* 
     * 
     * 功能块作用：判断用户输入是否为空，是否设置默认值
     * 注释：未来有更多格式可在此处修改
     * 
     */

    function fnId(temp) {
        if (typeof temp == 'string') {
            return temp;
        } else {
            return 'navigator-cc';
        }
    }

    function fnLogo(temp) {
        let imgDiv = document.createElement('div');
        imgDiv.className = '__logoDiv';
        if (typeof temp == 'string') {
            let imgElement = `<img src="${temp}" alt="logo">`
            imgDiv.innerHTML = imgElement;
        }
        return imgDiv;
    }

    /* 
     * 
     * 功能块作用：对创建对象中的'data'属性做业务逻辑，主要业务逻辑是添加li元素。
     * 注释：初步设定为Switch写法，为未来添加更多格式做考虑。
     * 
     */

    function fnData() {

        switch (true) {
            case typeof st.data == 'object':
                decodeArr(st.data);
                break;
            default:
                console.error('Expansion ccNavigator activation failed! Please check the "data" format.');
                break;
        }

        function decodeArr(lmap) {
            let finalElement = '';
            lmap.forEach(element => {
                if (typeof element == 'string') {
                    finalElement += addElement(element, '#', '_self');
                } else if (typeof element == 'object') {
                    if (typeof element[2] == 'undefined') {
                        finalElement += addElement(element[0], element[1], '_self');
                    } else {
                        finalElement += addElement(element[0], element[1], element[2]);
                    }
                }
            });
            ulElement.innerHTML = finalElement;
        }
    }

    /* 
     * 
     * 功能块作用：修改此处来修改元素内容
     * 注释：利用模板字符串
     * 
     */

    function addElement(le, leurl, targetType) {
        let svgIcon1 = `<svg t="1610285040108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7128" width="24" height="24"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="7129" fill="#515151"></path></svg>`
        let liElement = `<a href="${leurl}" target="${targetType}"><li>${le}<div>${svgIcon1}</div></li></a>`;
        return liElement;
    }


    /* 
     * 
     * 功能块作用：绑定点击函数
     * 注释：原生js实现
     * 
     */
    let svgMenu = document.querySelector('#__svgDiv');
    let ull = document.querySelector('#' + elementId + ' > ul');
    let clickFlag = false;
    svgMenu.onclick = function () {
        if (clickFlag == false) {
            // ull.style.display = 'flex !important';
            ull.style.setProperty("display", "flex", "important");
            clickFlag = true;
            svgMenu.innerHTML = svgIcon00;
        } else {
            ull.style.display = 'none';
            clickFlag = false;
            svgMenu.innerHTML = svgIcon0;
        }
    }

    /* 
     * 
     * 功能块作用：开启滚动隐藏显示菜单栏
     * 注释：原生js实现
     * 
     */
    if (st.scrollHide) {
        let scrollControllFlag = false;
        let pTop = 0;
        let scrollOffset = 300;
        let scrollDelta = 10;

        window.addEventListener("scroll",function(){

            if (!scrollControllFlag) {
                scrollControllFlag = true;
                (!window.requestAnimationFrame)? 
                setTimeout(autoHideMenu,250) : requestAnimationFrame(autoHideMenu);

            }
            
        });

        function autoHideMenu (){
            let cTop = document.documentElement.scrollTop;

            checkScrollDirection(cTop);
            pTop =cTop;

            scrollControllFlag = false;
        }


        /* 判断滚动方向添加移动类 */
        function checkScrollDirection (cTopTemp){
            if (cTopTemp - pTop > scrollDelta && cTopTemp > scrollOffset ) {
                if (parentElement.className != 'navigator-box hidden-cc') {
                    parentElement.className += ' hidden-cc';
                }

            }else if(pTop - cTopTemp > scrollDelta) {
                parentElement.className = 'navigator-box';
            }

        }
    }

}